<template>
  <el-container class="container">
    <!-- 侧边栏 -->
    <el-aside :width="isCollapse ? '45px' : '200px'" class="container-aside">
      <!-- 标题区域 -->
      <div class="container-aside-title">
        <transition name="fade">
          <span style="color:#ace1cc">
            {{ isCollapse ? '医' : '医疗健康' }}
          </span>
        </transition>
      </div>

      <!-- 菜单区域 -->
      <div class="container-aside-menu">
        <el-menu

            :collapse="delayedCollapse"
            :default-active="activeMenu"
            class="container-aside-menu-demo"
            background-color="#013d3c"
            active-text-color="#eaf7ef"
            text-color="#8cd4bf"
            unique-opened
            router
            :collapse-transition="true"
            :popper-class="delayedCollapse ? 'collapsed-menu-popup' : ''"
        >
          <!-- 使用递归组件渲染多级菜单 -->
          <template v-for="item in menuItems" :key="item.index">
            <menu-item :item="item" :is-collapse="isCollapse" />
          </template>
        </el-menu>
      </div>
    </el-aside>

    <!-- 主体内容 -->
    <el-container class="container-container">
      <el-header class="container-container-header">
        <el-icon :size="20" @click="toggleCollapse" style="cursor: pointer;">
          <component :is="isCollapse ? Expand : Fold" />
        </el-icon>
      </el-header>
      <el-main class="container-container-main">
        <div v-if="loading" class="loading-container">
          <el-icon class="loading-icon" :size="30"><Loading /></el-icon>
          <span>菜单加载中...</span>
        </div>
        <router-view v-else />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Expand, Fold, Loading } from '@element-plus/icons-vue'

// 导入 API 模块
import api from '@/api/globalApi'

// 导入菜单转换工具
import MenuTransformer from '@/utils/MenuTransformer'

// 导入 MenuItem 组件
import MenuItem from '@/components/MenuItem.vue'

const route = useRoute()

// 菜单数据
const menuItems = ref([])

// 控制侧边栏是否折叠
const isCollapse = ref(false)
const delayedCollapse = ref(false)



// 当前激活菜单
const activeMenu = computed(() => {
  return route.path
})

// 切换折叠状态
const toggleCollapse = async () => {
  isCollapse.value = !isCollapse.value

  if (isCollapse.value) {
    setTimeout(() => {
      delayedCollapse.value = true
    }, 300)
  } else {
    delayedCollapse.value = false
  }
}

// 安全调用 ElMessage 的封装函数
const safeMessage = {
  error(msg) {
    if (typeof msg === 'string' && msg.trim()) {
      ElMessage.error(msg)
    }
  },
  warning(msg) {
    if (typeof msg === 'string' && msg.trim()) {
      ElMessage.warning(msg)
    }
  },
  success(msg) {
    if (typeof msg === 'string' && msg.trim()) {
      ElMessage.success(msg)
    }
  }
}

/// 使用示例
const fetchMenuData = async () => {
  const loading = ref(true);

  try {
    const res = await api.IndexApi.getMenu(1, 100);
    if (res.data.code === 1) {

      const transformer = new MenuTransformer(res);

      menuItems.value = transformer.getMenuItems();

    } else {
      safeMessage.error(res?.data?.msg || '菜单加载失败');
    }
  } catch (error) {
    console.error('获取菜单出错:', error);
    safeMessage.error(error?.message || '接口异常，请检查网络连接');
  } finally {
    loading.value = false;
  }
};

// 调用示例


// 响应窗口大小变化时调整折叠状态
const handleResize = () => {
  const width = window.innerWidth
  isCollapse.value = width < 768
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
  handleResize()
  fetchMenuData();
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style lang="scss">
/* 全局样式 - 解决折叠菜单文字显示问题 */
.collapsed-menu-popup {
  .el-menu--popup {
    background-color: #013d3c;

    .el-menu-item,
    .el-sub-menu__title {
      color: #8cd4bf;

      span {
        display: inline-block !important;
        opacity: 1 !important;
      }

      .el-icon {
        margin-right: 8px;
      }
    }
  }
}
</style>

<style scoped lang="scss">
@use "@/assets/common.scss" as *;

/* Global fade effect for general elements */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: row;
  transition: all 0.3s ease;

  .container-aside {
    height: 100vh;
    background-color: $green-dark;
    overflow: hidden;
    transition: width 0.3s ease;

    .container-aside-title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50px;
      font-size: 35px;
      font-family: 隶书;
      white-space: nowrap;
    }

    .container-aside-menu {
      height: calc(100vh - 50px);

      .container-aside-menu-demo {
        --el-menu-item-height: 40px;
        --el-menu-sub-item-height: 40px;
        border-right: none;
        transition: none;

        .el-menu-item,
        .el-sub-menu__title {
          height: 50px;
          line-height: 50px;
          transition: background-color 0.3s ease;
        }
      }
    }
  }

  .container-container {
    flex-direction: column;

    .container-container-header {
      height: 30px;
      display: flex;
      align-items: center;
      background-color: $green-light;
      padding-left: 10px;
    }

    .container-container-main {
      background-color: $green-lightest;
      padding: 20px;
    }
  }
}

.el-menu {
  --el-menu-base-level-padding: 11px;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;

  .loading-icon {
    margin-bottom: 10px;
    animation: rotate 2s linear infinite;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
